<template>
  <div class="login">
    <div class="login1" style="height:80%">
      <div class="login2">
        <img src="../../assets/image/logo.png">
        <div class="login8">欢迎使用美食校园美食分享平台</div>
      </div>
      <div class="login3">
        <div class="login4">
          <el-input style="margin-top:30px" prefix-icon="el-icon-user-solid" v-model="loginAccount" placeholder="请输入用户账号"></el-input>
          <el-input style="margin-top:30px" prefix-icon="el-icon-s-promotion" v-model="email" placeholder="请输入用户邮箱"></el-input>
          <el-input style="margin-top:30px" prefix-icon="el-icon-eleme" v-model="code" placeholder="请输入邮箱验证码"></el-input>
          <el-input style="margin-top:30px" prefix-icon="el-icon-arrow-right" type="password" v-model="password" placeholder="请输入用户密码"></el-input>
          <el-input style="margin-top:30px" prefix-icon="el-icon-arrow-right" type="password" v-model="conPassword" placeholder="请输入确认密码"></el-input>
          <div class="login5">
            <div @click="toRegister">注册？</div>
            <div @click="toLogin">登录？</div>
          </div>
          <div class="login6">
            <div class="login7" @click="forgetPassword">
              修 改
            </div>
            <div @click="getEmailReg" v-if="countDown == 0" class="login7" style="margin-left:20px">
              获取验证码
            </div>
            <div v-if="countDown > 0" class="login7" style="margin-left:20px">
              {{countDown}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getEmailReg,forgetPassword} from '../../api/api'
  export default {
    data() {
      return{
        loginAccount:"",
        email: "",
        password: "",
        conPassword: "",
        code: "",
        countDown: 0,
        timer: null,
      }
    },
    methods: {
        toRegister() {
            this.$router.push("/register")
        },
        toLogin() {
            this.$router.push("/login")
        },
        getEmailReg() {
            if(!this.email) {
                this.$message({
                    message: '请输入邮箱',
                    type: 'warning'
                });
                return;
            }
            var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 邮箱正则表达式
            if (!regex.test(this.email)) {
                this.$message({
                    message: '请输入正确的邮箱格式',
                    type: 'warning'
                });
                return;
            }
            getEmailReg({email: this.email}).then(res => {
                if (res.code == 1000) {
                    this.$message({
                        message: '验证码已发送',
                        type: 'success'
                    });
                    var that = this
                    // 设置倒计时秒数（例如60秒）
                    this.countDown = 60;
                    // 清除之前的定时器（如果有的话）
                    clearInterval(this.timer);
                    // 设置新的定时器，每秒减1，直到countDown为0
                    this.timer = setInterval(() => {
                        if (that.countDown > 0) {
                            that.countDown -= 1;
                        } else {
                            clearInterval(that.timer); // 倒计时结束，清除定时器
                            that.timer = null; // 重置定时器ID为null
                        }
                    }, 1000);
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            })
        },
        forgetPassword() {
            if(!this.loginAccount) {
                this.$message({
                    message: '请输入登录账号',
                    type: 'warning'
                });
                return;
            }
            if(!this.password) {
                this.$message({
                    message: '请输入密码',
                    type: 'warning'
                });
                return;
            }
            if(!this.code) {
                this.$message({
                    message: '请输入用户名',
                    type: 'warning'
                });
                return;
            }
            if(!this.email) {
                this.$message({
                    message: '请输入邮箱',
                    type: 'warning'
                });
                return;
            }
            var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 邮箱正则表达式
            if (!regex.test(this.email)) {
                this.$message({
                    message: '请输入正确的邮箱格式',
                    type: 'warning'
                });
                return;
            }
            if (this.password != this.conPassword) {
                this.$message({
                    message: '确认密码错误',
                    type: 'warning'
                });
                return;
            }
            var param = {
                loginAccount: this.loginAccount,
                password: this.password,
                email: this.email,
                code: this.code
            }
            forgetPassword(param).then(res => {
                if (res.code == 1000) {
                this.$message({
                    message: '密码修改成功',
                    type: 'success'
                });
                var that = this
                setTimeout(function() {
                    that.$router.push("/login")
                },500)
                } else {
                this.$message({
                    message: res.message,
                    type: 'warning'
                });
                }
            })
        }
    },
    created() {
     
    },
    mounted() {
      
    },
    destroyed() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    }
 }
</script>

<style scoped>
@import url('../../assets/css/login.css');
.login4>>>.el-input__inner {
  -webkit-appearance: none;
  background-color: #EEF0F3;
  background-image: none;
  border-radius: 4px;
  border: 0;
  width: 100%;
  font-family: '黑体';
}
</style>